<template>
  <h1>06-组合API-生命周期</h1>
  <button>点我</button>
</template>

<script>
/* 
学习目标：认识vue3.0生命周期钩子函数
  setup 创建实例前
  onBeforeMount 挂载DOM前
  onMounted 挂载DOM后
  onBeforeUpdate 更新组件前
  onUpdated 更新组件后
  onBeforeUnmount 卸载销毁前
  onUnmounted 卸载销毁后

3个注意点：
  1. setup 内部写的生命周期钩子是 on+钩子名称，使用时记得 import 导入函数
  2. 销毁组件 改名叫 卸载组件，beforeDestroy 变成了 beforeUnmount，destroyed 变成了 unmounted
  3. 组合式生命周期钩子没有 onBeforeCreate 或 onCreated
*/
import { onMounted } from 'vue'
export default {
  name: 'App',
  // 在组件创建前就被执行
  setup() {
    console.log(111, document.querySelector('h1')) // null

    // 组合式API生命周期钩子
    onMounted(() => {
      console.log(2222, document.querySelector('h1')) // <h1></h1>
    })
  },
  mounted() {
    console.log(3333, document.querySelector('h1')) // <h1></h1>
  },
  // beforeDestroy 变成了 beforeUnmount
  // destroyed  变成了 unmounted
  beforeUnmount() {},
  unmounted() {},
}
</script>